<template>
  <div class="friend-requests-root">
    <div class="tabs">
      <button :class="{active: tab==='received'}" @click="tab='received'">收到的请求</button>
      <button :class="{active: tab==='sent'}" @click="tab='sent'">我发出的请求</button>
    </div>

    <!-- 收到的请求 -->
    <div v-if="tab==='received'">
      <ul class="request-list">
        <li v-for="req in received" :key="req.id" class="request-item">
          <img :src="req.fromUser.avatar || defaultAvatar" class="avatar" />
          <div class="user-info">
            <span class="nickname">{{ req.fromUser.nickname || req.fromUser.username || req.userId }}</span>
            <span class="username">({{ req.fromUser.username || req.userId }})</span>
          </div>
          <span class="desc">请求加你为好友</span>
          <button class="accept-btn" @click="accept(req.id)" :disabled="req.status!=='pending'">同意</button>
          <button class="reject-btn" @click="reject(req.id)" :disabled="req.status!=='pending'">拒绝</button>
          <span v-if="req.status==='accepted'" class="status accepted">已同意</span>
          <span v-if="req.status==='rejected'" class="status rejected">已拒绝</span>
        </li>
      </ul>
      <div v-if="received.length===0" class="empty-tip">暂无收到的好友请求</div>
    </div>

    <!-- 我发出的请求 -->
    <div v-if="tab==='sent'">
      <ul class="request-list">
        <li v-for="req in sent" :key="req.id" class="request-item">
          <img :src="req.toUser.avatar || defaultAvatar" class="avatar" />
          <div class="user-info">
            <span class="nickname">{{ req.toUser.nickname || req.toUser.username || req.friendId }}</span>
            <span class="username">({{ req.toUser.username || req.friendId }})</span>
          </div>
          <span class="desc">等待对方同意</span>
          <span v-if="req.status==='pending'" class="status pending">待处理</span>
          <span v-if="req.status==='accepted'" class="status accepted">已同意</span>
          <span v-if="req.status==='rejected'" class="status rejected">已拒绝</span>
        </li>
      </ul>
      <div v-if="sent.length===0" class="empty-tip">暂无发出的好友请求</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'FriendRequestsTab',
  data() {
    return {
      tab: 'received',
      received: [],
      sent: [],
      defaultAvatar: 'https://img.yzcdn.cn/vant/logo.png'
    }
  },
  created() {
    this.loadRequests()
  },
  methods: {
    async loadRequests() {
      const userId = localStorage.getItem('userId')
      // 收到的请求
      const res1 = await axios.get('/api/friend/requests/received', { params: { userId } })
      // 发出的请求
      const res2 = await axios.get('/api/friend/requests/sent', { params: { userId } })
      // 自动查找用户信息
      this.received = await Promise.all(res1.data.map(async r => ({
        ...r,
        fromUser: await this.getUserInfo(r.userId)
      })))
      this.sent = await Promise.all(res2.data.map(async r => ({
        ...r,
        toUser: await this.getUserInfo(r.friendId)
      })))
    },
    async getUserInfo(userId) {
      try {
        const res = await axios.get('/api/user/info', { params: { userId } })
        return res.data || {}
      } catch {
        return {}
      }
    },
    async accept(requestId) {
      await axios.post('/api/friend/requests/accept', { requestId })
      this.loadRequests()
    },
    async reject(requestId) {
      await axios.post('/api/friend/requests/reject', { requestId })
      this.loadRequests()
    }
  }
}
</script>

<style scoped>
.friend-requests-root {
  width: 100%;
}
.tabs {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
}
.tabs button {
  padding: 8px 32px;
  border: none;
  border-radius: 8px 8px 0 0;
  background: #f7f8fa;
  color: #222;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.tabs button.active {
  background: #07c160;
  color: #fff;
}
.request-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.request-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f2f2f2;
}
.request-item:last-child {
  border-bottom: none;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #f2f2f2;
  object-fit: cover;
}
.user-info {
  display: flex;
  flex-direction: column;
  min-width: 90px;
}
.nickname {
  font-size: 16px;
  color: #222;
  font-weight: 600;
}
.username {
  font-size: 13px;
  color: #888;
}
.desc {
  color: #888;
  font-size: 14px;
  margin-right: 10px;
  margin-left: 10px;
}
.accept-btn, .reject-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 8px;
  transition: background 0.2s;
}
.accept-btn {
  background: #07c160;
  color: #fff;
}
.accept-btn:disabled {
  background: #b2f2d7;
  color: #fff;
  cursor: not-allowed;
}
.reject-btn {
  background: #f56c6c;
  color: #fff;
}
.reject-btn:disabled {
  background: #fbc4c4;
  color: #fff;
  cursor: not-allowed;
}
.status {
  margin-left: 10px;
  font-size: 14px;
  font-weight: 600;
}
.status.accepted {
  color: #07c160;
}
.status.rejected {
  color: #f56c6c;
}
.status.pending {
  color: #888;
}
.empty-tip {
  text-align: center;
  color: #aaa;
  margin-top: 30px;
  font-size: 15px;
}
</style> 